<template>

	<el-row class="container">
     <headers  v-bind:activeIndex='activeIndex'></headers>
		<el-col :span="24" class="main" >
					<el-col :span="24" class="breadcrumb-container">
          <!-- 导航栏菜单开始 -->
      <el-col :span="24" class="main1">
          <aside>
                <el-menu   class="el-menu-vertical-demo el-menu1" @open="handleopen" @close="handleclose"
                  unique-opened router >
                  <template v-for="(item,index) in $router.options.routes" v-if="item.menu2">
                    <div v-if="!item.hidden" :key="item.name">
                    <el-submenu :index="index+''" v-if="!item.leaf" :key="index">
                      <template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
                      <el-menu-item v-for="child in item.children" :index="child.path" :key="child.path">{{child.name}}</el-menu-item>
                    </el-submenu>
                    <el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path">
                      <i :class="item.iconCls"></i>{{item.children[0].name}}
                    </el-menu-item>
                    </div>
                  </template>
                </el-menu>
          </aside>
			<section class="content-container">
				<div class="h-w-100">
					<el-col :span="24" class="content-wrapper h-w-100" >
            <el-tooltip  v-bind:class="{none:controlShow===false}" class="item" effect="dark" content="关闭" placement="bottom">
                 <i class="el-icon-circle-close close" style="z-index:10001"  @click="showCont"></i>
            </el-tooltip>

						<transition name="fade" mode="out-in">
							<router-view>

              </router-view>
						</transition>
					</el-col>
			    	</div>
		    	</section>
		</el-col>
    <!-- 导航栏菜单结束 -->
				</el-col>
		</el-col>
	</el-row>
</template>

<script>
import headers from '../../component/header.vue'
export default {
   components: {
    headers
  },
  data() {
    return {
      sysName: "轨道交通监测智能一体化平台",
      name: "admin",
      sysUserName: "",
      sysUserAvatar: "",
      listmenu:'北京地铁',
      controlShow:false,
      project:'',
      activeIndex: '2',
      token:''
    };

  },
   mounted() {
     this.token = sessionStorage.getItem('token');
    //  this.role()
    // this.$router.options.routes[11].hidden = true
    //  console.log(this.$router.options.routes[11])
  //  this.loginModel.checkInfo('bob',1).then(res => {
  //    console.log(res);
  //  }).catch(err => {
  //    console.log(err.message)
  //  })
  
  },
  methods:{
  //  role() {
  //    this.userModel
  //       .userToken(this.token)
  //       .then(res => {
  //         var userIdentityId = res.data.userIdentity.id;
  //         if (userIdentityId == 1) {
  //           console.log(this.$router.options.routes[11])
  //         } 
  //       })
  //       .catch(err => {
  //         console.log(err.message);
  //       });
  //   },
    onSubmit() {
      console.log("submit!");
    },
    handleopen() {
      //console.log('handleopen');
    },
    handleclose() {
      //console.log('handleclose');
    },
    showCont(){
      this.controlShow = !this.controlShow;
      },
  },
};
</script>
<style scoped lang="scss">
.container {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 100%;
  .header {
    height: 60px;
    line-height: 60px;
    background-color: #475669;
    color: #fff;
    .userinfo {
      text-align: right;
      padding-right: 35px;
      float: right;
      .userinfo-inner {
        cursor: pointer;
        color: #fff;
        img {
          width: 40px;
          height: 40px;
          border-radius: 20px;
          margin: 10px 0px 10px 10px;
          float: right;

        }
      }
    }

    .logo {
      height: 60px;
      font-size: 22px;
      padding-left: 20px;
      padding-right: 20px;
      border-color: rgba(238, 241, 146, 0.3);
      img {
        width: 40px;
        float: left;
        margin: 10px 10px 10px 18px;
      }
      .txt {
        color: #ffffff;
      }
    }
    .logo-width {
      width: 400px;
    }
    .logo-collapse-width {
      width: 60px;
    }
  }
  .main {
    display: flex;
    // background: #324057;
    position: absolute;
    top: 60px;
    bottom: 0px;
    overflow: hidden;
    z-index: 10;
    aside {
      width: 180px;
      // position: absolute;
      // top: 0px;
      // bottom: 0px;
      .el-menu {
        height: 100%;
      }
      .collapsed {
        width: 60px;
        .item {
          position: relative;
        }
        .submenu {
          position: absolute;
          top: 0px;
          left: 60px;
          z-index: 99999;
          height: auto;
          display: none;
        }
      }
    }
    .menu-collapsed {
      flex: 0 0 60px;
      width: 60px;
    }
    .menu-expanded {
      width: 120px;
    }
    .content-container {
      flex: 1;
      overflow-y: hidden;
      padding: 0px;
      .breadcrumb-container {
        //margin-bottom: 15px;
        .title {
          width: 200px;
          float: left;
          color: #475669;
        }
        .breadcrumb-inner {
          float: right;
        }
      }
      .content-wrapper {
        box-sizing: border-box;
      }
    }
  }
}
</style>
<style>
.el-menu {
  background-color: #475669;
}
.el-submenu .el-menu {
  background-color: #475669;
}
.el-menu1 {
  border-right: 2px solid #dfdbdb;
}
.l-menu .el-menu-item{
  color: #ffffff;
}
.el-menu-item,
.el-submenu__title {
  color: #ffffff;
}
.el-submenu .el-menu-item:hover,
.el-submenu__title:hover {
  background-color: #5d646d;
}
.input-css {
  margin-left: 10px;
  width: 100px;
}
.main1 {
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0px;
  overflow: hidden;
  border-right: 1px solid #dfdbdb;
  z-index: 1;

}
.top-menu .el-menu-item{
   color: #dfdbdb;
}
.top-menu .is-active{
  color: #20a0ff;
}
 .el-menu-item:hover{
   background-color: #d1dbe5;
 }
.item{
  margin-top: 10px;
  margin-right: 50px;
}
  .close{
   position: fixed;
   right: 0px;
  }
  .box {
    width: 400px;

  }
  .top {
      text-align: center;
    }
    .left {
      float: left;
      width: 60px;
    }

    .right {
      float: right;
      width: 60px;
    }

    .bottom {
      clear: both;
      text-align: center;
    }

    .item {
         margin-right: 10px
    }

    .left .el-tooltip__popper,
    .right .el-tooltip__popper {
      padding: 8px 10px;
    }
    .menu-list:not(.el-menu--collapse) {
    width: 140px;
    min-height:200px;
  }
.menu-list .el-menu-item{
  color: #ffffff;
}
.menu-list .is-active{
    color:#20a0ff;
}
.flexible{
      z-index: 11;
  }
.flexible .el-radio-button__inner{
background-color:transparent;
 border: 0px;
 color: #ffffff;
}
.el-radio-button:first-child .el-radio-button__inner{
  border-radius:0;
}
.el-radio-button:last-child .el-radio-button__inner{
 border-radius:0;
}
.search-box {
  width: 1300px;
  height: 700px;
}
 .amap-demo {
      height: 300px;
    }

  .amap-demo {
      height: 300px;
    }

    .search-box {
      display: flex;
      left: 20px;
    }

    .amap-page-container {
     width: 1500px;
     height: 1000px;
     z-index: -10;
    }
    #panel{
      z-index: 0;
    }
    .h-w-100{
      width: 100%;
      height: 100%;
    }
    .amap-overlays{
      z-index: 0;
    }
.dg.a{
  margin-right: 45px;
}
.projectname{
  line-height: 80px;
}
.none{
   display:none;
}
.dg.main{margin-top: 70px;margin-right: 40px; z-index: 0;}
/*#popup{ margin-left: 140px;}*/
.el-menu--horizontal>.el-menu-item.is-active{
  color: #20a0ff;
}
</style>
